<template>
    <section>




        <!--新增界面-->
        <el-col :sm="24" :lg="16">
            <div class="grid-content bg-purple">
                <div class="dev-title">添加数据模板内容</div>
            </div>
            <div class="col-bg clearfix">
                <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm"
                    style="padding: 15px;width: 90%;margin:40px auto 10px;max-width: 900px;">

                    <el-form-item label="数据点名称" prop="name">
                        <el-input v-model="addForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="数据类型" class="grade" prop="dataType">
                        <el-select v-model="addForm.dataType" @change="scade()" placeholder="请选择数据类型">
                            <el-option v-for="item in dataTypeList" :label="item.remark" :value="item.value"></el-option>
                            <!-- <el-option label="数值型" value="0" ></el-option>
                            <el-option label="开关型" value="1"></el-option>
                             <el-option label="字符型" value="2"></el-option> -->
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数值类型" class="grade" prop="valueKind">
                        <el-select v-model="addForm.valueKind" placeholder="请选择数值类型">
                            <el-option v-for="item in dictlist" :label="item.remark" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 数据类型为数值型时显示 -->
                    <el-form-item v-if="addForm.dataType == 0">
                        <div style="display: inline-block;color:#b1b1b1;">最小值：</div>
                        <el-input style="display: inline-block;width: 30%;" size="mini" type="number"
                            v-model="numberobj.min"></el-input>
                        <div style="display: inline-block;color:#b1b1b1;margin-left: 30px;">最大值：</div>
                        <el-input style="display: inline-block;width: 30%;" size="mini" type="number"
                            v-model="numberobj.max"></el-input>
                    </el-form-item>
                    <!-- 数据类型为枚举型时显示 -->
                    <el-form-item v-if="addForm.dataType == 4">
                        <el-tag :key="tag.tagvalue" v-for="tag in enumerationList" closable :disable-transitions="false"
                            type="info" @close="tagClose(tag.name)" style="margin-left: 10px;margin-top: 5px;">
                            {{ tag.name }}-{{ tag.value }}</el-tag>
                        <div style="display: flex;align-items: center;flex-wrap: wrap;">
                            <div class="input-new-tag" v-if="inputVisible"><span class="ipt-label">名称：</span><el-input
                                    class="ipt-tag" v-model="inputName" ref="saveTagInput" size="small"></el-input></div>
                            <div class="input-new-tag" v-if="inputVisible"><span class="ipt-label">值：</span><el-input
                                    class="ipt-tag" v-model="inputValue" ref="saveTagInput" size="small"></el-input></div>
                            <el-button v-if="inputVisible" class="button-new-tag" type="primary" plain size="small"
                                @click="addTags">确定</el-button>
                            <el-button v-if="inputVisible" class="button-new-tag" type="warning" plain size="small"
                                @click="inputVisible = !inputVisible">取消</el-button>
                            <el-button v-if="!inputVisible" class="button-new-tag" size="small"
                                @click="showInput">+新增</el-button>
                        </div>
                        <!-- <el-tag :key="tag.tagvalue" v-for="tag in enumerationList" closable :disable-transitions="false" type="info" @close="tagClose(tag.tagvalue)" style="margin-left: 10px;"> {{tag.tagvalue}}</el-tag>
                        <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="addTags" @blur="addTags"></el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+新增</el-button> -->
                    </el-form-item>
                    <el-form-item label="数据点地址" class="grade" prop="register">
                        <el-input v-model="addForm.register" @input="changeRegister"></el-input>
                    </el-form-item>
                    <el-form-item label="数据点默认值" class="grade" prop="registerDefaultValue">
                        <el-input v-model="addForm.registerDefaultValue"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="小数位数" class="grade" >
                        <el-select v-model="addForm.decimalAccuracy" :disabled="disabled">
                                <el-option label="0" value="0"></el-option>
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                                <el-option label="3" value="3"></el-option>
                                <el-option label="4" value="4"></el-option>
                                <el-option label="5" value="5"></el-option>
                                <el-option label="6" value="6"></el-option>
                            </el-select>
                    </el-form-item> -->
                    <!-- <el-form-item label="串口号" class="grade">
                        <el-select v-model="serial" @change="changeSerial">
                            <el-option label="无" value=""></el-option>
                            <el-option v-for="item in serialList" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <!-- <el-form-item label="数据点类型" class="grade">
                        <el-radio-group v-model="registertype">
                            <el-radio :disabled="haveserial" label="">无</el-radio>
                            <el-radio label="0">保持数据点</el-radio>
                            <el-radio label="1">线圈</el-radio>
                        </el-radio-group>
                    </el-form-item> -->

                    <!-- <el-form-item label="整数位数" class="grade" >
                        <el-select v-model="addForm.integerAccuracy" :disabled="disabled">
                            <el-option label="0" value="0"></el-option>
                            <el-option label="1" value="1"></el-option>
                            <el-option label="2" value="2"></el-option>
                            <el-option label="3" value="3"></el-option>
                            <el-option label="4" value="4"></el-option>
                            <el-option label="5" value="5"></el-option>
                            <el-option label="6" value="6"></el-option>
                        </el-select>
                    </el-form-item> -->

                    <el-form-item label="单位" class="grade">
                        <el-select v-model="addForm.unitType" placeholder="请选择单位" @change="sleUnit" :disabled="disabled">
                            <el-option label="无" value=""></el-option>
                            <el-option v-for="item in unitlist" :label="item.name + ' - ' + item.value"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="指令公式" class="grade" >
                        <el-input v-model="addForm.sendFormula"></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="数据点限制" class="grade">
                        <el-select v-model="addForm.dataRestrict" placeholder="请选择">
                            <el-option label="公开"  :value="0"></el-option>
                            <el-option label="一级"  :value="1"></el-option>
                            <el-option label="二级"  :value="2"></el-option>
                            <el-option label="三级"  :value="3"></el-option>
                            <el-option label="四级"  :value="4"></el-option>
                            <el-option label="五级"  :value="5"></el-option>
                            <el-option label="六级"  :value="6"></el-option>
                            <el-option label="七级"  :value="7"></el-option>
                            <el-option label="八级"  :value="8"></el-option>
                            <el-option label="九级"  :value="9"></el-option>
                            <el-option label="十级"  :value="10"></el-option>
                            <el-option label="不公开"  :value="11"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="接收公式" class="grade" prop="">
                        <el-input v-model="addForm.formula" :disabled="disabled"></el-input>
                        <span style="position: absolute;left:0;top:35px;color:#b3b2b2;">公式例子：(a+10)*2,a为数据点值</span>
                    </el-form-item>
                    <el-form-item label="发送公式" class="grade" prop="">
                        <el-input v-model="addForm.sendFormula" :disabled="disabled"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="公式例子：" class="grade" >
                        <span>(a+10)*2,a为数据点值</span>
                    </el-form-item> -->
                    <!-- <el-form-item label="刷新频率" class="grade" prop="refreshRate">
                        <el-input type="number" v-model="addForm.refreshRate"></el-input>
                    </el-form-item> -->

                    <!-- <el-form-item label="死区起始值" class="grade">
                <el-input type="number" v-model="addForm.deadSpaceStart"></el-input>
            </el-form-item>
            <el-form-item label="死区结束值" class="grade">
                <el-input type="number" v-model="addForm.deadSpaceEnd"></el-input>
            </el-form-item> -->
                    <!-- <el-form-item label="流量模式" class="grade"  prop="fluxMode">
                        <el-radio-group v-model="addForm.fluxMode">
                            <el-radio label="0">默认</el-radio>
                            <el-radio label="1">省流量</el-radio>
                        </el-radio-group>
                    </el-form-item> -->

                    <!-- <el-form-item v-if="usertype!=0" label="权限 " class="grade" prop="restrict">
                        <el-radio-group v-model="addForm.restrict">
                            <el-radio label="0">公开</el-radio>
                            <el-radio label="1">厂商可见</el-radio>
                            <el-radio label="2">子用户可见</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    <el-form-item label="数据存储" class="grade">
                        <el-radio-group v-model="addForm.ifSaveHistory">
                            <el-radio label="0">不存储</el-radio>
                            <el-radio label="1">存储</el-radio>
                            <el-radio label="2">变化时存储</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否展示" class="grade" prop="ifVisible">
                        <el-radio-group v-model="addForm.ifVisible">
                            <el-radio label="1">展示</el-radio>
                            <el-radio label="0">不展示</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="图标组" class="grade" style="margin-top:10px;">
                        <el-select v-model="addForm.deviceRecipePictureGroupId" placeholder="请选择图标组">
                            <el-option label="默认" value="0"></el-option>
                            <el-option v-for="item in deviceRecipe" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="读写" class="grade" prop="writeRead">
                        <el-radio-group v-model="addForm.writeRead">
                            <el-radio label="0">只读</el-radio>
                            <el-radio label="1">读写</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="数据源">
                        <el-input type="textarea" v-model="addForm.registerOrder"></el-input>
                    </el-form-item>
                    <el-form-item v-if="custom_version != 2" label="描述">
                        <el-input type="textarea" v-model="addForm.remark"></el-input>
                    </el-form-item>
                    <!-- custom_version=2是电量定制版 -->
                    <el-form-item v-if="custom_version == 2" label="备注">
                        <el-radio-group v-model="remarktext" @change="changeRemark">
                            <!-- <el-radio label="oriMode">原模式</el-radio>
                                <el-radio label="runMode">运行模式</el-radio> -->
                            <el-radio label="oriMode">模式显示</el-radio>
                            <el-radio label="runMode">模式设置</el-radio>
                            <el-radio label="backTmp">回风温度</el-radio>
                            <el-radio label="curEnergy">当前耗能</el-radio>
                            <el-radio label="0">其他</el-radio>
                        </el-radio-group>
                        <el-input :disabled='otherRemark' v-model="addForm.remark"></el-input>
                    </el-form-item>




                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align: center;">
                    <!-- <el-button @click.native="addFormVisible = false">取消</el-button> -->
                    <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
                </div>
            </div>

        </el-col>
        <!-- <el-col :sm="24" :lg="8" style="padding-left: 20px">
                <div class="grid-content bg-purple">
                    <div class="dev-title">帮助</div>
                </div>
                <div class="col-bg clearfix">
                    <el-collapse v-model="activeName" accordion>
                        <el-collapse-item title="数据模板" name="1">
                            <div>云服务将根据数据模板解析协议，相同格式的设备可关联同一个模板。请先添加数据模板，然后添加数据点，最后添加设备。</div>
                        </el-collapse-item>
                        <el-collapse-item title="数据点" name="2">
                                <div>与组态软件的数据点写法相同，填十进制数据点地址，数据点为起始地址+1。</div>
                                <div>如：</div>
                                <div>功能码03H或06H，起始地址0000H，则填：40001；</div>
                                <div>04H，起始地址000AH，则填：30011；</div>
                                <div>功能码01H或05H，起始地址0002H，则填：00003；</div>
                                <div>功能码02H，起始地址0003H，则填：10004。</div>
                        </el-collapse-item>
                        <el-collapse-item title="数据类型" name="3">
                            <div>AB CD：大端在前</div>
                            <div>CD AB：小端在前</div>
                            <div> 如：</div>
                            <div>4字节无符号整数(AB CD)：123456 为 0x0001 0xE240</div>
                            <div>4字节无符号整数(CD AB)：123456 为 0xE240 0x0001</div>
                            <div>4字节有符号整数(AB CD)：-123456为 0xFFFE 0x1DC0</div>
                            <div>4字节有符号整数(CD AB)：-123456为 0x1DC0 0xFFFE</div>
                            <div>4字节浮点型(AB CD)：12.3 为 0x3F9D 0x70A4</div>
                            <div>4字节浮点型(CD AB)：12.3 为 0x70A4 0x3F9D</div>
                        </el-collapse-item>
                
                    </el-collapse>
                </div>
            </el-col> -->

    </section>
</template>

<script>
import {
    device_data_recipe_post,
    alarm_trigger_template_post,
    alarm_group_query,
    device_data_recipe_add_body,
    device_data_recipe_get_body,
    dict_query,
    unit_query,
    device_recipe_picture_query
} from '../../api/api';

export default {
    data() {
        var checkFormula = (rule, value, callback) => {
            if (value && value.indexOf('a') == -1) {
                callback(new Error('公式格式错误'))
            } else {
                callback()
            }
        }
        return {
            remarktext: '',//电量定制版 备注 里单选框的内容
            otherRemark: true,
            haveserial: false,
            registertype: "",//数据点类型
            serial: '',//串口
            serialList: [],
            usertype: '',
            deviceRecipe: '',
            activeName: '1',
            unitlist: '',
            dictlist: '',
            dataTypeList: [],
            alarmUserList: {}, //告警组ID
            alarmUserLists: {}, //告警人ID
            alarmTypeValue: '',

            addLoading: false,
            addFormRules: {//表单验证
                formula: [{
                    validator: checkFormula
                }],
                name: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }, { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
                dataType: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                register: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                registerDefaultValue: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                registerLength: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                valueKind: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                integerAccuracy: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                decimalAccuracy: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                writeRead: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                unit: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                // formula: [{
                //     required: true,
                //     message: '必填',
                //     trigger: 'blur'
                // }],
                refreshRate: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                deadSpaceStart: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                deadSpaceEnd: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                fluxMode: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                restrict: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                ifSaveHistory: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                remark: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],
                priority: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }],

            },
            //新增界面数据
            bodyId: '',//上页面传过来的id
            addForm: {
                sendFormula: '',
                name: '',
                dataType: '',
                register: '',
                registerLength: '',
                valueKind: '',
                integerAccuracy: '',
                decimalAccuracy: '0',
                writeRead: '0',
                unit: '',
                unitType: '',
                formula: '',
                sendFormula: '',
                refreshRate: '',
                ifSaveHistory: '1',
                deadSpaceStart: '',
                deadSpaceEnd: '',
                fluxMode: '0',
                restrict: '0',
                ifVisible: '1',
                remark: '',
                registerOrder: '',
                priority: '',
                deviceRecipePictureGroupId: '',
                dataRestrict: 0

            },
            disabled: false,//禁用
            custom_version: this.CustomVersion(),
            enumerationList: [],//枚举类型标签列表
            inputVisible: false,//数据类型为枚举型点击添加开启输入框
            inputName: '',//枚举类名称
            inputValue: '',//枚举类值
            numberobj: {
                min: '',
                max: ''
            }
        }
    },
    methods: {
        showInput() {//新增枚举
            this.inputVisible = true;
            this.inputName = ""
            this.inputValue = ""
            // this.$nextTick(_ => {
            //     this.$refs.saveTagInput.$refs.input.focus();
            // });
        },
        //数据类型为枚举型添加标签
        addTags() {
            let inputName = this.inputName;
            let inputValue = this.inputValue;
            if (!inputName) {
                this.$message({ message: '请输入名称', type: 'warning' })
                return false
            };
            if (!inputValue) {
                this.$message({ message: '请输入值', type: 'warning' })
                return false
            };
            if (inputValue && inputName) {
                this.enumerationList.push({
                    name: inputName,
                    value: inputValue
                });
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        //删除枚举型标签触发
        tagClose(tag) {
            this.enumerationList.splice(this.enumerationList.findIndex(i => i.name === tag), 1)
        },
        //数据类型切换
        changeDataType(e) {
            if (e != 0) {
                this.numberobj.min = ""
                this.numberobj.max = ""
            }
            if (e != 4) {
                this.enumerationList = []
            }
        },
        changeRemark() {
            if (this.remarktext == 0) {
                this.otherRemark = false
            } else {
                this.otherRemark = true
            }
        },
        //输入数据点地址的时候自动匹配
        changeRegister(text) {
            if (text.indexOf('-') > -1) {
                this.registertype = text.split('-')[1].split('')[0]//1250-986取值9
                console.log(this.registertype)
            }
            if (text.indexOf('#') > -1) {
                this.serial = text.split('#')[1]//1250#986取值986
                console.log(this.serial)
            }
        },
        changeRegisterType(e) {
            console.log(e)
            if (this.addForm.register.indexOf('-') > -1 && this.addForm.register.indexOf('#') == -1) {
                this.addForm.register = this.addForm.register.split('-')[0] + '-' + e
            } else {
                if (this.addForm.register.indexOf('#') > -1) {
                    console.log(this.addForm.register)
                    let splitreg = this.addForm.register.split('#')[1]
                    let splitreg0 = this.addForm.register.split('#')[0].split('-')[0]
                    console.log(splitreg0)
                    this.addForm.register = splitreg0 + '-' + e + '#' + splitreg
                } else {
                    this.addForm.register = this.addForm.register + '-' + e
                }
            }
        },
        changeSerial(e) {
            if (e === '') {
                this.registertype = ''
                this.haveserial = false
            } else {
                this.registertype = '0'
                this.haveserial = true
            }
            console.log(e)
            // if(this.addForm.register.indexOf('#')>-1){
            //     this.addForm.register = this.addForm.register.split('#')[0]+'#'+e
            // }else{
            //     if(this.addForm.register.indexOf('-')>-1){
            //         let splitreg = this.addForm.register.split('-')[1]
            //         let splitreg0 = this.addForm.register.split('-')[0]
            //         this.addForm.register = splitreg0+'-'+splitreg + '#'+ e
            //     }else{
            //         this.addForm.register = this.addForm.register+'#'+e
            //     }
            // }
        },
        sleUnit(e) {//获得"℃"单位
            let obj = {}
            obj = this.unitlist.find((item) => {
                return item.id == e
            })
            this.addForm.unit = obj.value
        },
        //新增
        scade() {
            if (this.addForm.dataType == 1) {
                this.disabled = true;
            } else {

                this.addForm.decimalAccuracy = 0;
                this.addForm.refreshRate = 0;
                this.addForm.integerAccuracy = 5;
                this.addForm.valueKind = this.dictlist[0].value;
                this.addForm.priority = 1;

                this.addForm.deviceRecipePictureGroupId = 0;
                this.disabled = false;
            }
        },
        addSubmit: function () {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    //this.registertype:数据点类型. this.serial:串口号
                    if (this.addForm.dataType == 0) {
                        this.addForm.dataTypeFormatInfo = JSON.stringify(this.numberobj)
                    }
                    if (this.addForm.dataType == 4) {
                        this.addForm.dataTypeFormatInfo = JSON.stringify(this.enumerationList)
                    }
                    if (this.addForm.register.indexOf('-') > -1) {
                        this.addForm.register = this.addForm.register.split('-')[0]
                    }
                    if (this.addForm.register.indexOf('#') > -1 && this.addForm.register.indexOf('-') == -1) {
                        this.addForm.register = this.addForm.register.split('#')[0]
                    }
                    console.log(this.addForm.register)
                    if (this.registertype != "" && this.serial === '') {
                        this.addForm.register = this.addForm.register + '#' + this.registertype
                    }
                    if (this.registertype === "" && this.serial === '') {
                        this.addForm.register = this.addForm.register
                    }
                    if (this.registertype === "" && this.serial != '') {
                        this.addForm.register = this.addForm.register + '#' + this.serial
                    }
                    if (this.registertype != "" && this.serial != '') {
                        this.addForm.register = this.addForm.register + '-' + this.serial + '#' + this.registertype
                    }
                    if (this.serial === 0) {
                        this.addForm.register = this.addForm.register + '-' + this.serial + '#' + this.registertype
                    }
                    // this.$confirm('确认提交吗？', '提示', {}).then(() => {

                    // this.addLoading = true;
                    if (this.remarktext != 0) {
                        this.addForm.remark = this.remarktext
                    }
                    let para = {
                        id: this.bodyId,
                        recipeBodyFormList: [this.addForm]
                    }
                    console.log(para)
                    device_data_recipe_add_body(para).then((res) => {
                        this.begCode(res.code);
                        if (res.code == 0) {
                            this.addLoading = false;
                            //NProgress.done();
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            this.addForm.register = ''
                            this.$refs['addForm'].resetFields();
                            this.addFormVisible = false;
                            window.history.go(-1)

                        }

                    });
                    // });
                }
            });
        },
        getDist(name) {//获取数值与数据类型
            let para1 = {
                name: name,
                pageNo: 1,
                pageSize: 999,

            }
            dict_query(para1).then((res) => {
                this.begCode(res.code);
                if (res.code == 0) {
                    this.addLoading = false;
                    //NProgress.done();
                    // this.$message({ 
                    //     message: '提交成功',
                    //     type: 'success'
                    // });
                    if (name == 'valueKind') {
                        this.dictlist = res.data.list;//数值
                    } else if (name == 'dataType') {
                        this.dataTypeList = res.data.list;//数据
                    }
                }
            });
        },
    },
    beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = true; // B 跳转到 A 时，让 A 缓存，即不刷新（代码写在B页面）
        next();
    },
    mounted() {
        this.usertype = JSON.parse(sessionStorage.getItem('user')).type;
        this.bodyId = sessionStorage.getItem('deviceDataRecipeId');
        this.getDist('valueKind')
        this.getDist('dataType')
        // para1 = {
        //     name: 'unit',
        //     pageSize: 999,
        //     pageNo: 1,
        // }
        // dict_query(para1).then((res) => { this.begCode (res.code);
        //     if (res.code == 0) {
        //         this.addLoading = false;

        //         this.unitlist = res.data.list;


        //     }

        // });
        let para2 = {
            pageSize: 999,
            pageNo: 1,
        }
        unit_query(para2).then((res) => {
            this.begCode(res.code);
            console.log(res)
            if (res.code == 0) {
                this.addLoading = false;

                this.unitlist = res.data.list;//获得单位


            }

        });
        device_recipe_picture_query().then((res) => {
            this.deviceRecipe = res.data.list;//图标组
        })

        for (let i = 0; i < 21; i++) {
            this.serialList.push(i)
        }
        console.log(this.serialList)
    }
}
</script>

<style scoped>
.el-form-item .el-form-item {
    margin-bottom: 22px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    display: flex;

    width: 200px;
    margin-left: 10px;
    vertical-align: bottom;
}

.ipt-tag {
    display: inline-block;
}

.ipt-label {
    display: inline-block;
    width: 80px;
}</style>